<template>
  <div class="content">
    <h1>provideB.vue（孙子级别）</h1>
    <div>
      <button @click="changeColor">修改provide的值</button>
    </div>
    <div class="box"></div>

    <hr/>
  </div>
</template>

<script setup lang='ts'>
import { ref, inject } from 'vue'
import type { Ref } from 'vue'

const color = inject<Ref<string>>('color')


const changeColor = () => {
  // color?.value = '#' + Math.floor(Math.random() * 0xffffff).toString(16) // 不确定类型，故报错
  color!.value = '#' + Math.floor(Math.random() * 0xffffff).toString(16)
}
</script>
<style lang="less">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  background-color: v-bind(color);
}
</style>